<template>
    <div class="QR">
        <div class="QR_Box">
            <div class="QR_Code">
                <div class="top_header">
                    <div class="_box_header">
                        <p>扫码登录</p>
                    </div>
                    <div class="_box_peo" @click="GoLog">
                        <img src="../../assets/images/peo.png" alt lazy />
                    </div>
                </div>
                <p class="box_text">请使用微信扫码登录</p>
                <div class="Code">
                    <div class="C_Img_Box">
                        <img src="../../assets/images/ewmDL.jpg" alt />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import { setCookie, getCookie, clearCookie } from "@/components/Cookie.js";
// import Vie from "@/components/View.vue";
// import { aLogin } from "@/api/api";
export default {
    name: 'login',
    data() {
        return {};
    },
    created() {},
    mounted() {},
    methods: {
        //返回登录
        GoLog() {
            this.$router.push('/Login');
        }
    },
    components: {
        // Vie,
    }
};
</script>
<style lang="less" scoped>
.QR {
    width: 100%;
    height: 100%;
    background: url('../../assets/images/new_bj.jpg') no-repeat center;
    background-size: 100% 100%;
    .QR_Box {
        width: 100%;
        height: 100%;
        background: rgba(24, 49, 107, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        .QR_Code {
            width: 33rem;
            height: 37.42rem;
            background: rgb(255, 255, 255);
            border-radius: 1rem;
            .top_header {
                width: 100%;
                display: flex;
                justify-content: flex-end;

                ._box_header {
                    width: 10.44rem;
                    height: 2.61rem;
                    border: 1px solid rgba(238, 238, 238, 1);
                    border-radius: 0rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 0.4rem;
                    margin-right: 1rem;
                }

                ._box_peo {
                    width: 3.5rem;
                    height: 3.5rem;
                    cursor: pointer;
                    img {
                        width: 100%;
                        height: auto;
                        display: block;
                    }
                }
            }
            .box_text {
                width: 100%;
                font-size: 2rem;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                line-height: 11.2rem;
                text-align: center;
            }
            .Code {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                //二维码外边框

                .C_Img_Box {
                    width: 16.3rem;
                    height: 16.2rem;
                    padding: 1rem;
                    box-sizing: border-box;
                    background: linear-gradient(#d9eaff, #d9eaff) left top, linear-gradient(#d9eaff, #d9eaff) left top,
                        linear-gradient(#d9eaff, #d9eaff) left bottom, linear-gradient(#d9eaff, #d9eaff) left bottom,
                        linear-gradient(#d9eaff, #d9eaff) right top, linear-gradient(#d9eaff, #d9eaff) right top,
                        linear-gradient(#d9eaff, #d9eaff) right bottom, linear-gradient(#d9eaff, #d9eaff) right bottom;
                    background-repeat: no-repeat;
                    background-size: 2px 20px, 20px 2px;
                    img {
                        width: 100%;
                        height: auto;
                        display: block;
                    }
                }
            }
        }
    }
}
//二维码外边框
// .QR_code {
// 	width: 16.2rem;
// 	height: 16.2rem;
// 	margin-top: 4.3rem;
// 	padding: 1.4rem;
// 	box-sizing: border-box;
// 	background: linear-gradient(#fff, #fff) left top,
// 		linear-gradient(#fff, #fff) left top,
// 		linear-gradient(#fff, #fff) right top,
// 		linear-gradient(#fff, #fff) right top,
// 		linear-gradient(#fff, #fff) right bottom,
</style>
